<template>
  <div class="section" ref="parent">
    <div class="border-row"></div>
    <div class="border-col"></div>
    <div class="section-header">用人单位多维化信息</div>
    <div class="title" :style="`width:${chartsDom.width};background:rgb(2,38,124);height:10%;margin:10px auto 0;font-size:${fontSize-1}px`">
        <span>所属镇街</span>
        <span>用人单位</span>
        <span>三医两养</span>
        <span>重点企业</span>
        <span>在招岗位</span>
        <span>人力资源需求</span>
    </div>
    <div style="height:100%" v-if="jz">
      <swiper :options="swiperOption" v-if="list.length" :style="chartsDom">
        <!-- slides -->
        <swiper-slide v-for="(item,i) in list" :key="i" :style="`width:${chartsDom.width};height:1%;margin:0 auto 0;font-size:${fontSize}px;font-weight:bold`" class="swiper-slide-jz" >
            
              <span>{{item.name}}</span>
              <span>{{item.total}}</span>
              <span>{{item.sanyi}}</span>
              <span>{{item.focus}}</span>
              <span>{{item.post}}</span>
              <span>{{item.demand}}</span>
        </swiper-slide>
      </swiper>
    </div>
    <animae-jz  :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { streetMultidimensional } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      chartData: null,
      fontSize:this.height * 1/34,
      list:[],
      jz:true,
      titleWidth:''
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.titleWidth=val
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height-30-31-40-20 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_=>{
     this.init()
    })
  },
  methods: {
      init(){
        this.jz=false
      streetMultidimensional(this.dateProp).then(({data:{data}})=>{
        this.jz=true
        console.log(data)
        this.list=data
      })
    },
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
  .title{
      display flex
      justify-content space-between
      align-items center
  }
  .swiper-slide-jz
      display flex
      justify-content space-between
      align-items center
   .swiper-slide-jz:nth-child(2n+1){
       background rgb(10,10,61)
       color rgb(1,109,243)
   }
   .swiper-slide-jz:nth-child(2n){
        background rgb(0,13,83)
        color rgb(255,255,255)
   }
   span {
     display inline-block
     width 20%
     text-align center
   }
</style>